<template>
  <div class="after-sales" v-if="data">
    <div>
      <div>
        <span
          ><b
            >申请时间:{{
              moment(data[0].order_time).format("YYYY-MM-DD HH:mm:ss")
            }}</b
          ></span
        >
        <img :src="`/commodity/${data[0].pic}`" alt="" />
      </div>
      <div>
        <span>状态:{{ data[0].order_status }}</span>
      </div>
      <div>
        <h4>
          超时倒计时：<br /><span style="color: red">{{ this.date }}</span>
        </h4>
        <el-button type="danger" size="small" @click="dialogFormVisible = true"
          >处理订单</el-button
        >
      </div>
      <!-- 弹出层 -->
      <el-dialog title="售后处理" :visible.sync="dialogFormVisible">
        <section class="popdialog">
          <div>
            <h5>申请时间：<span style="font-size: 3px">123</span></h5>
            <h3>申请人： <span>黎明</span></h3>
          </div>
          <div>
            <h2>申请服务：<span style="color: red">退货退款</span></h2>
          </div>
          <div>
            <h6>申请原因：<span style="color: red">尺码不合适</span></h6>
            <h6>退款金额：<span style="color: red">29.12</span></h6>
          </div>
        </section>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// import moment from "moment";
export default {
  data() {
    return {
      date: "",
      data: null,
      oid: "",
      pop: "",
      dialogFormVisible: false,
    };
  },
  mounted() {
    this.getAfter();
  },
  methods: {
    getAfter() {
      let url = "http://localhost:8000/stroll/orders";
      this.axios.get(url).then((res) => {
        this.data = res.data;
      });
    },
  },
  afterOid(oid) {
    this.oid = oid;
    this.getAfter();
  },
};
</script>

<style lang="scss" scoped>
.after-sales {
  display: flex;
  flex-wrap: wrap;
  > div {
    width: 200px;
    padding: 10px;
    margin: 10px;
    border: 1px solid rgb(212, 212, 212);
    > div:first-child {
      img {
        width: 100%;
      }
    }
    > div:first-child ~ div {
      display: flex;
      justify-content: space-between;
    }
  }
  .popdialog {
    > div:first-child {
      display: flex;
      justify-content: space-between;
    }
    > div:nth-child(2) {
      text-align: center;
    }
    > div:nth-child(3) {
      background-color: aliceblue;
      margin: 10px auto;
    }
  }
}
</style>